<template>
    <view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar :isShowTransparentTitle="false"   navbarType='5'>
            <view class="ml10" slot="left">
                我的
            </view>
        </wlk-navbar>
        <view class="user-content relative">
            <view class="user-card relative">
                <view class="user-info wlkflex" @click="loginPopupShow">
                    <view class="avatar-box wlkflex">
                        <u-avatar :src="userInfo.avatar" size="62"></u-avatar>
                    </view>
                    <view class="user-nickname ml20">{{userInfo.nickname||'去登录'}}</view>
                </view>
            </view>
            <view class="nav">
                <view class="order-card wlkflex justify-between br08 shadow">
                    <view class="grid" @click="toOrder('0')">
                        <view class="wlkflex justify-center ">
                            <u--image :showLoading="true" src="/static/images/user/payment.png" width="25" height="25"></u--image>

                        </view>
                        <view class="mt20 center">待付款</view>
                    </view>
                    <view class="grid" @click="toOrder('1')">
                        <view class="wlkflex justify-center ">
                            <u--image :showLoading="true" src="/static/images/user/consumption.png" width="25" height="25"></u--image>

                        </view>
                        <view class="mt20 center">已支付</view>
                    </view>
                    <view class="grid relative" @click="toOrder('3')">
                        <view class="wlkflex justify-center ">
                            <u--image :showLoading="true" src="/static/images/user/refund.png" width="25" height="25"></u--image>

                        </view>
                        <view class="mt20 center">已完成</view>
                    </view>
                    <view class="grid over relative" @click="toOrder('refund')">
                        <view class="wlkflex justify-center ">
                            <u--image :showLoading="true" src="/static/images/user/evaluate.png" width="25" height="25"></u--image>
                        </view>
                        <view class="mt20 center">退款</view>
                        <view class="triangle triangle_border"></view>
                        <view class="triangle triangle_bg" ></view>
                    </view>
                    <view class="order-all grid" @click="toOrder('all')">
                        <view class="wlkflex justify-center ">
                            <uni-icons type="bars" size="30" :color="themeColor"></uni-icons>
                        </view>
                        <view class="mt10 center">全部订单</view>
                    </view>
                </view>
                <view class="tools-card br08 shadow">
                    <u-cell-group :border="false">
               <!--       <u-cell :border="false" isLink @click="$Router.push('/pages/ticket/list')">
                        <uni-icons slot="icon" type="wallet" size="25"></uni-icons>
                        <text class="title" slot="title">景点门票</text>
                      </u-cell>-->
                        <u-cell :border="false" isLink @click="$Router.push('/pages/wallet/index')">
                            <uni-icons slot="icon" type="wallet" size="25"></uni-icons>
                            <text class="title" slot="title">我的钱包</text>
                        </u-cell>
                        <u-cell :border="false" isLink @click="$Router.push('/pages/line/like')">
                            <uni-icons slot="icon" type="star" size="25"></uni-icons>
                            <text class="title" slot="title">收藏线路</text>
                        </u-cell>
                        <u-cell :border="false" isLink title="点赞游记" @click="$Router.push('/pages/note/like')">
                            <uni-icons slot="icon" type="heart" size="25"></uni-icons>
                            <text class="title" slot="title">点赞游记</text>
                        </u-cell>
                        <u-cell :border="false" isLink title="出行人管理" @click="$Router.push('/pages/passenger/list')">
                            <uni-icons slot="icon" type="staff" size="25"></uni-icons>
                            <text class="title" slot="title">出行人管理</text>
                        </u-cell>
                        <u-cell :border="false" isLink title="常用信息" @click="$Router.push('/pages/user/info')">
                            <uni-icons slot="icon" type="vip" size="25"></uni-icons>
                            <text class="title" slot="title">个人信息</text>
                        </u-cell>
                        <u-cell :border="false" isLink title="系统设置" @click="$Router.push('/pages/user/set')">
                            <uni-icons slot="icon" type="gear" size="25"></uni-icons>
                            <text class="title" slot="title">系统设置</text>
                        </u-cell>
                        <u-cell :border="false" isLink title="分销中心" @click="$Router.push('/pages/plugins/commission/index')">
                            <uni-icons slot="icon" type="medal" size="25"></uni-icons>
                            <text class="title" slot="title">分销中心</text>
                        </u-cell>
                        <u-cell :border="false" isLink title="退出登入" @click="outModel = true">
                            <uni-icons slot="icon" type="undo" size="25"></uni-icons>
                            <text class="title" slot="title">退出登入</text>
                        </u-cell>
                    </u-cell-group>
                </view>
            </view>

        </view>

        <u-modal

                :show="outModel"
                :showCancelButton="true"
                @cancel ='outModel =false'
                @close ='outModel =false'
                :closeOnClickOverlay="true"
                @confirm="logoutFun"
                :confirmColor="themeColor"
                content="确定退出登录？"
        ></u-modal>
        <wlk-tabbar></wlk-tabbar>
    </view>


</template>
<script>
    var _self;
    import share from "@/wlkutils/share";
    import { mapMutations, mapActions, mapState, mapGetters } from 'vuex';
    export default {
        computed: {
            ...mapGetters(['userInfo','themeColor','isLogin'])

        },
        data() {
            return {
                outModel:false,
                style:{marginTop:''},
            };
        },
        onLoad() {
            uni.hideTabBar();
            _self = this;
        },
        onShow() {
            this.isLogin?this.getUserInfo():'';
        },
        onShareAppMessage(res){
            return share.setShareInfo();
        },
        // 下拉刷新
        onPullDownRefresh() {
            this.isLogin?this.getUserInfo():'';
        },
        created() {
            this.style.marginTop = uni.$u.addUnit(uni.getSystemInfoSync().statusBarHeight + 44, 'px');
        },
        methods: {
            ...mapActions(['getUserInfo','logout']),
            ...mapMutations(['setLoginPopupShow']),
            toOrder(st){
                this.$store.commit('setOrderStatus',st);
                this.$Router.pushTab('/pages/index/order')
            },
            loginPopupShow(){
                if(!this.isLogin){
                    this.setLoginPopupShow(true)
                }

            },
            logoutFun() {
                this.outModel =false;
                this.logout();
            },

        }
    }
</script>
<style lang="scss">
   page{
       /*background-color: #FFFFFF!important;*/
       .user-card{
           /* #ifdef H5 */
           padding: 150rpx 30rpx 200rpx 30rpx;
           /* #endif */
           /* #ifdef MP-WEIXIN */
           padding: 200rpx 30rpx 220rpx 30rpx;
           /* #endif */
           background-image: repeating-linear-gradient(328deg, hsla(196,0%,79%,0.06) 0px, hsla(196,0%,79%,0.06) 1px,transparent 1px, transparent 96px),repeating-linear-gradient(238deg, hsla(196,0%,79%,0.06) 0px, hsla(196,0%,79%,0.06) 1px,transparent 1px, transparent 96px),repeating-linear-gradient(238deg, hsla(196,0%,79%,0.09) 0px, hsla(196,0%,79%,0.09) 1px,transparent 1px, transparent 12px),repeating-linear-gradient(328deg, hsla(196,0%,79%,0.09) 0px, hsla(196,0%,79%,0.09) 1px,transparent 1px, transparent 12px),linear-gradient(328deg, rgb(255,255,255),rgb(255,255,255));
           font-size: 38rpx;
           font-weight: bold;
           border-radius: 0 0 30% 30%;
           .user-nickname{
               color: $uni-text-color;
           }
       }
       .nav{
           position: absolute;
           /* #ifdef H5 */
           top: 330rpx;
           /* #endif */
           /* #ifdef MP-WEIXIN */
           top: 360rpx;
           /* #endif */
           width: 92%;
           left: 4%;
           padding-bottom: 120rpx;
           .order-card{
               background-color: #FFFFFF;
               font-size:$font-base;
               padding: 20rpx 0;
               .grid{
                   padding: 20rpx 0;
                   width: 20%;
               }
               .over{
                   .triangle {
                       position: absolute;
                       top: 60rpx;
                       z-index: 998;
                       overflow: hidden;
                       width: 0;
                       height: 0;
                       border-width: 5px;
                       border-style: dashed  solid  dashed  dashed;

                   }
                   .triangle_bg {
                       right: -19rpx;
                       z-index: 999;
                       border-color: transparent transparent  transparent #f3f3f3;

                   }
                   .triangle_border {
                       right: -20rpx;
                       border-color:transparent transparent  transparent #f3f3f3;
                   }
               }
               .order-all{
                   box-shadow: -5px 0 4px -2px rgba(0, 0, 0, 0.05);
               }
           }
           .tools-card{
               background-color: #FFFFFF;
               font-size:$font-base;
               padding: 30rpx 0;
               margin-top: 40rpx;
               .u-cell{
                   padding:10rpx 0;
               }
               .title{
                   font-size:$font-base;
                   margin-left: 10rpx;
               }
           }
       }

   }
</style>
